<!--
 * @Description: 
 * @Author: william
 * @Date: 2024-08-08 11:26:27
 * @LastEditors: william
 * @LastEditTime: 2025-09-16 15:13:43
-->
<template>
  <nw-PageTitle :title="$t('login.login')" />
  <nw-PageContainer>
    <image :src="getViteImageUrl('app.png')" class="logo-img" />
    <uni-forms
      ref="formEl"
      label-width="0px"
      :modelValue="formData"
      :rules="rules"
      class="nw-forms-login"
    >
      <uni-forms-item name="userName">
        <uni-easyinput
          v-model="formData.userName"
          :placeholder="$t('login.inputUser')"
          confirmType="next"
          trim="all"
          :clearable="false"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput
          :type="easyinputType"
          :passwordIcon="false"
          :suffixIcon="formData.password ? suffixIcon : ''"
          :placeholder="$t('login.inputPass')"
          confirmType="next"
          trim="all"
          :clearable="false"
          v-model="formData.password"
          @iconClick="handleIconSwitch"
        ></uni-easyinput>
      </uni-forms-item>
      <view class="agree-wrap">
        <uni-data-checkbox
          class="nw-data-checkbox"
          :selectedColor="g_style.mainTheme"
          v-model="readAgree"
          :localdata="[
            {
              text: $t('login.agreeTerms'),
              value: 1
            }
          ]"
        ></uni-data-checkbox>
        <navigator
          class="yf-green"
          hover-class="yf-green"
          url="/pages/user/protocol?type=yhfwxy"
        >
          《{{ $t('login.userAgreement') }}》
        </navigator>
        {{ $t('login.and') }}
        <navigator
          class="yf-green"
          hover-class="none"
          url="/pages/user/protocol?type=yxbhxy"
        >
          《{{ $t('login.privacyAgreement') }}》
        </navigator>
      </view>
      <nw-Button
        class="submit-btn"
        :text="$t('login.login')"
        :loading="loading"
        @click="handleSubmit"
      ></nw-Button>
    </uni-forms>
  </nw-PageContainer>
</template>

<script setup>
const formEl = ref(null)
const formData = ref({
  userName: '',
  password: ''
})
const rules = ref({
  userName: {
    rules: [
      {
        required: true,
        errorMessage: ' '
        // errorMessage: g_t('login.inputUser')
      }
    ]
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: ' '
        // errorMessage: g_t('login.inputPass')
      }
    ]
  }
})
const suffixIcon = ref('eye-slash')
const easyinputType = ref('password')
const readAgree = ref('')
const loading = ref(false)
// 数据缓存
const userStore = useUserStore()
const appStore = useAppStore()
const cookingStore = useCookingStore()

onMounted(_ => {
  //
})

const handleIconSwitch = _ => {
  suffixIcon.value = suffixIcon.value === 'eye-slash' ? 'eye' : 'eye-slash'
  easyinputType.value = easyinputType.value === 'password' ? 'text' : 'password'
}

const handleSubmit = _ => {
  loading.value = true
  formEl.value
    .validate()
    .then(res => {
      console.log('表单数据信息：', res)
      if (!readAgree.value) {
        g_utils.showToast(g_t('login.agreeFirst'))
        loading.value = false
      } else {
        login()
      }
    })
    .catch(err => {
      console.log('表单错误信息：', err)
      loading.value = false
    })
}

const login = () => {
  g_api.user
    .apiLogin({
      username: formData.value.userName,
      password: formData.value.password,
      // captchaId: '033eb213c7f047548bd720b1921c4201',
      // captchaCode: '1234',
      client: 'app',
      isLogin: true
    })
    .then(({ code, data }) => {
      if (code === 200 && data) {
        userStore.setToken(data.accessToken, new Date(data.expiresAt))
        userStore.getUserInfo().then(_ => {

          // 上传用户系统信息
          appStore.upLoadAppClientInfo(_).then(__ => {
          }).catch(__ => {
            g_utils.showToast(__.message)
          })

          // 下载调料单位校准数据
          cookingStore.downloadFlavourUnitAdjustInfo().then(__ => {
          }).catch(__ => {
            g_utils.showToast(__.message)
          })
        })
        uni.redirectTo({
          url: '/pages/cooking/index'
        })
      }
    })
    .finally(_ => {
      loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.page-container {
  background-color: var(--bg-color);
  .logo-img {
    flex-shrink: 0;
    width: 240rpx;
    height: 240rpx;
    margin: 60rpx auto;
  }
}
.nw-forms-login {
  padding: 0 35 * 2rpx;
  :deep() {
    .uni-forms-item__label {
      height: 0;
    }
    .uni-easyinput {
      .uni-easyinput__content {
        .uni-easyinput__content-input {
          min-height: 62rpx;
          height: 62rpx;
        }
      }
    }
  }
}

.agree-wrap {
  display: flex;
  align-items: center;
  font-size: 12 * 2rpx;
  color: #666;
  :deep(.nw-data-checkbox) {
    flex: initial;
    .checklist-group .checklist-box {
      margin: 0;
      .checklist-text {
        font-size: 12 * 2rpx;
      }
    }
  }
  .yf-green {
    color: var(--main-theme);
  }
}

:deep(.submit-btn) {
  margin-top: 24 * 2rpx;
}
</style>
